<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<jsp:include page="head.jsp"/>
<%--占位--%>
<div class="fly-panel">
</div>
<!--中间内容-->
<div class="layui-container" align="center">
    <div class="layui-container fly-marginTop">
        <div class="fly-panel fly-panel-user" pad20>
            <div class="layui-tab layui-tab-brief" lay-filter="user">
                <ul class="layui-tab-title">
                    <li ><a href="${pageContext.request.contextPath}/user/to_login.do">密码登录</a></li>
                    <li class="layui-this">邮箱验证登录</li>
                </ul>
                <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">

                    <div class="layui-tab-item layui-show">
                        <div class="layui-form layui-form-pane">
                            <form action="${pageContext.request.contextPath}/user/loginEmail.do" method="post">
                                <div class="layui-form-item">
                                    <label for="email" class="layui-form-label">邮箱</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="email" name="email" required lay-verify="required" autocomplete="off" class="layui-input">
                                        <input type="hidden" id="flag" value="2">
                                    </div>
                                    <div class="layui-form-mid">
                                        <span style="color: #c00;"></span>
                                    </div>
                                </div>
                                <!--验证码-->
                                <div class="layui-form-item">
                                    <label class="layui-form-label">验证码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="emailcode" name="emailcode" lay-verify="required|checkEmail_code" placeholder="请输入邮箱验证码" autocomplete="off" class="layui-input">
                                        <input type="hidden"  name="hiddencode" id="hiddencode" value="">
                                        <input type="hidden"  name="checkemail" id="checkemail" value="">
                                    </div>
                                    <div class="layui-form-mid" style="padding:0!important;">
                                        <input id="send-email-code" class="layui-btn layui-btn-normal " name="send-email-code" type="button"   value="获取验证码"  />
                                    </div>

                                </div>

                                <div class="layui-form-item">
                                    <button type="submit" class="layui-btn" lay-filter="*" lay-submit>立即登录</button>
                                    <span style="padding-left:20px;">
                                        <a href="${pageContext.request.contextPath}/user/to_forget.do">忘记密码？</a>
                                    </span>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="bottom.jsp"/>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/emailcodeVerify.js" ></script>
<script>
    layui.use(['form','jquery'],function(){
        var form = layui.form,
            $ = layui.$;
    });
    //邮箱是否被注册过
    layui.use(['form','layer'],function(){
        var form = layui.form;

        $("#email").blur(function(){
            var msg ="";
            var email = $("#email").val();
            $.ajax({
                type: "POST",
                url: '/txblog/user/checkUserEmail.do',
                async: false, // 使用同步的方法
                data: {
                    'email':email
                },
                dataType: 'json',
                success: function(result) {
                    if (result==1) {
                        msg = "邮箱未注册！";
                    }
                }
            });
            if(msg!=""){
                //设置隐藏域的值
                $("#checkemail").val("no");
                layer.msg(msg, {icon:5});
            }else{
                //设置隐藏域的值
                $("#checkemail").val("yes");
            }

        });
    });
</script>
<script>
    layui.use([ 'form' ], function() {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;
        /* 自定义表单验证 */
        form.verify({

            //验证码校验
            checkEmail_code : function(value, item) { // value：表单的值、item：表单的DOM对象
                //  验证码判断判断验证码是否填写正确
                //发送ajax请求
                var emailcode = value;
                var hiddencode = $("#hiddencode").val();
                console.log("emailcode="+emailcode+"hiddencode="+hiddencode)
                var flag="1";
                $.ajax({
                    type:"get",
                    url:"/txblog/user/checkCode.do",
                    async:false,
                    data:{"emailcode":emailcode,"hiddencode":hiddencode},
                    success:function(obj){
                        flag = obj;
                        // alert(obj);
                    },
                    dataType:"text"
                });
                if (flag=='0') {
                    return '验证码错误';
                }
            },
            checkemail : function(value, item) {
                var hiddenEmail = $("#checkemail").val();
                if(hiddenEmail=="no"){
                    return "邮箱未注册！";
                }
            },
            checkUser_pwd : [ /^[\S]{6,16}$/, '密码必须6到16位，且不能出现空格' ]

        });
    });

</script>
